/*
 * Copyright Thoughtworks, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import _ from "lodash";
import m from "mithril";
import * as Buttons from "views/components/buttons";
import { FlashMessageModelWithTimeout, MessageType } from "views/components/flash_message";
import { Modal, Size } from "views/components/modal";
import { i18n } from "helpers/i18n";
import styles from "views/pages/admin_config_xml/modals.scss";
/**
 * 显示Config.xml内容的模态框
 */
export class ShowConfigXmlModal extends Modal {
  private readonly configXmlContent: string;
  private readonly onEditCallback: () => void;
  private readonly lastModifiedBy: string;
  private readonly lastModifiedAt: string;
  private readonly filePath: string;
  private flashMessage: FlashMessageModelWithTimeout | null = null;

  /**
   * 构造函数
   * @param configXmlContent XML内容
   * @param onEditCallback 编辑按钮点击回调
   * @param lastModifiedBy 最后修改人
   * @param lastModifiedAt 最后修改时间
   * @param filePath 文件路径
   */
  constructor(
    configXmlContent: string,
    onEditCallback: () => void,
    lastModifiedBy: string,
    lastModifiedAt: string,
    filePath: string
  ) {
    super(Size.large);
    this.fixedHeight = true;
    this.configXmlContent = configXmlContent;
    this.onEditCallback = onEditCallback;
    this.lastModifiedBy = lastModifiedBy;
    this.lastModifiedAt = lastModifiedAt;
    this.filePath = filePath;
  }

  /**
   * 渲染模态框主体内容
   */
  body() {
    return (
      <div class={styles.configXmlContainer}>
        {this.flashMessage}
        <div class={styles.configXmlHeader}>
          <div class={styles.configXmlInfo}>
            <div class={styles.configXmlLastModified}>
              Last modified {this.lastModifiedAt} by {this.lastModifiedBy}
            </div>
            <div class={styles.configXmlFilePathTop}>Configuration File Path: {this.filePath}</div>
          </div>
          <div class={styles.configXmlActions}>
            <Buttons.Secondary data-test-id="button-copy" onclick={this.copyToClipboard.bind(this)}>
              {i18n.tSync("copy")}
            </Buttons.Secondary>
          </div>
        </div>
        <div class={styles.configXmlContent}>
          <pre class={styles.configXmlPre}>{this.configXmlContent}</pre>
        </div>
      </div>
    );
  }

  /**
   * 获取模态框标题
   */
  title(): string {
    return i18n.tSyncForPage("admin.config_xml.modal.show.title", "admin-config_xml");
  }

  /**
   * 获取模态框按钮
   */
  buttons() {
    return [
      <Buttons.Primary data-test-id="button-edit" onclick={this.edit.bind(this)}>
        {i18n.tSyncForPage("admin.config_xml.modal.show.edit.button", "admin-config_xml")}
      </Buttons.Primary>,
    ];
  }

  /**
   * 复制XML内容到剪贴板
   */
  private copyToClipboard() {
    navigator.clipboard
      .writeText(this.configXmlContent)
      .then(() => {
        this.flashMessage = new FlashMessageModelWithTimeout();
        this.flashMessage.setMessage(
          MessageType.success,
          i18n.tSyncForPage("admin.config_xml.copy.success", "admin-config-xml")
        );
        m.redraw();
        setTimeout(() => {
          this.flashMessage = null;
          m.redraw();
        }, 3000);
      })
      .catch(() => {
        this.flashMessage = new FlashMessageModelWithTimeout();
        this.flashMessage.setMessage(
          MessageType.alert,
          i18n.tSyncForPage("admin.config_xml.copy.failure", "admin-config-xml")
        );
        m.redraw();
        setTimeout(() => {
          this.flashMessage = null;
          m.redraw();
        }, 3000);
      });
  }

  /**
   * 编辑按钮点击处理
   */
  private edit() {
    this.close();
    this.onEditCallback();
  }
}
